<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('党组织地图')" />
    <style>
      .campus-map-container {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        margin: 20px 0;
      }

      .campus-map-title {
        text-align: center;
        color: white;
        font-size: 24px;
        margin-bottom: 20px;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
      }

      .campus-map {
        position: relative;
        width: 100%;
        height: 500px;
        background: url("")
            repeat,
          #e8f4f8;
        border: 3px solid #2c3e50;
        border-radius: 12px;
        overflow: hidden;
        margin: 0 auto;
        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
      }

      .branch-marker {
        position: absolute;
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        border: 2px solid #7a1c1c;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
        padding: 5px;
        backdrop-filter: blur(5px);
        background-color: rgba(231, 76, 60, 0.85);
        transform: translate(-50%, -50%);
      }

      .branch-marker:hover {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        z-index: 10;
        background: linear-gradient(135deg, #c0392b, #e74c3c);
      }

      .branch-marker .marker-text {
        font-weight: bold;
        color: #fff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        font-size: 12px;
        line-height: 1.3;
      }

      .branch-info {
        position: absolute;
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 15px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
        z-index: 100;
        display: none;
        width: 250px;
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.95);
      }

      .branch-info h4 {
        margin-top: 0;
        color: #2c3e50;
        border-bottom: 2px solid #e74c3c;
        padding-bottom: 8px;
      }

      .branch-info p {
        margin: 8px 0;
        color: #34495e;
        font-size: 14px;
      }

      .stat-number {
        color: #e74c3c;
        font-weight: bold;
      }

      .map-controls {
        text-align: center;
        margin: 20px 0;
      }

      .btn-map-control {
        margin: 0 8px;
        padding: 10px 20px;
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        color: white;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
      }

      .btn-map-control:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(231, 76, 60, 0.5);
        background: linear-gradient(135deg, #c0392b, #e74c3c);
      }

      .map-info-panel {
        background: #ffffff;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        border-left: 5px solid #e74c3c;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      .map-info-panel p {
        margin: 0;
        color: #2c3e50;
        font-size: 16px;
        line-height: 1.6;
      }

      .stats-container {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 25px 0;
      }

      .stat-card {
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        min-width: 160px;
        margin: 10px;
        transition: transform 0.3s ease;
        border-top: 4px solid #e74c3c;
      }

      .stat-card:hover {
        transform: translateY(-5px);
      }

      .stat-number-main {
        font-size: 2.2em;
        font-weight: bold;
        color: #e74c3c;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      }

      .stat-label {
        color: #7f8c8d;
        margin-top: 8px;
        font-weight: 500;
      }

      .map-legend {
        display: flex;
        justify-content: center;
        margin: 25px 0;
        flex-wrap: wrap;
        background: #ffffff;
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #e0e0e0;
      }

      .legend-item {
        display: flex;
        align-items: center;
        margin: 0 20px;
      }

      .legend-color {
        width: 25px;
        height: 25px;
        margin-right: 10px;
        border: 1px solid #ccc;
        border-radius: 50%;
      }

      .loading {
        text-align: center;
        padding: 20px;
        color: #fff;
        font-size: 18px;
      }

      /* 组织架构图样式 */
      .org-chart {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 20px;
      }

      .org-level {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 20px 0;
        width: 100%;
        flex-wrap: wrap;
        gap: 30px;
      }

      .org-node-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
      }

      .child-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .org-node {
        position: relative;
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        border-radius: 12px;
        padding: 15px 25px;
        color: white;
        text-align: center;
        min-width: 140px;
        max-width: 200px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 10px;
      }

      .org-node:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      }

      .org-node.has-members {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
      }

      .org-node.root {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        font-size: 18px;
        font-weight: bold;
      }

      .org-node-title {
        font-weight: 600;
        font-size: 16px;
        margin: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        line-height: 1.4;
        word-wrap: break-word;
      }

      .org-children {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 40px;
        position: relative;
      }

      /* 垂直连接线 - 从父节点到子节点区域 */
      .org-vertical-line {
        width: 3px;
        height: 40px;
        background: linear-gradient(to bottom, #e74c3c, #c0392b);
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      /* 水平连接线容器 */
      .org-horizontal-container {
        position: relative;
        width: 100%;
        height: 20px;
        margin-bottom: 20px;
      }

      /* 水平连接线 - 连接多个子节点 */
      .org-horizontal-line {
        height: 3px;
        background: linear-gradient(to right, #e74c3c, #c0392b);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      /* 子节点级别容器 */
      .org-child-level {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 30px;
        width: 100%;
        position: relative;
      }

      /* 子节点的向上连接线 */
      .org-child-connector {
        width: 3px;
        height: 20px;
        background: linear-gradient(to bottom, #e74c3c, #c0392b);
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      /* 当只有一个子节点时的直连线 */
      .org-single-line {
        width: 3px;
        height: 40px;
        background: linear-gradient(to bottom, #e74c3c, #c0392b);
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      /* 部门信息弹窗样式 */
      .dept-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .dept-modal.show {
        display: flex !important;
        align-items: center;
        justify-content: center;
        opacity: 1;
      }

      .dept-modal-content {
        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        padding: 0;
        border: none;
        border-radius: 15px;
        width: 90%;
        max-width: 500px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        animation: modalSlideIn 0.3s ease-out;
      }

      @keyframes modalSlideIn {
        from {
          transform: translateY(-50px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      .dept-modal-header {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: white;
        padding: 20px;
        border-radius: 15px 15px 0 0;
        position: relative;
      }

      .dept-modal-header h3 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .dept-modal-close {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }

      .dept-modal-close:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-50%) rotate(90deg);
      }

      .dept-modal-body {
        padding: 30px;
      }

      .dept-info-list {
        margin: 0;
        padding: 0;
        background: #f8f9fa;
        border-radius: 8px;
      }

      .info-row {
        display: flex;
        align-items: center;
        background: white;
        border-bottom: 1px solid #dee2e6;
        padding: 12px 20px;
        margin: 0;
      }

      .info-row:first-child {
        border-radius: 8px 8px 0 0;
      }

      .info-row:last-child {
        border-bottom: none;
        border-radius: 0 0 8px 8px;
      }

      .info-label {
        background: #e9ecef;
        color: #495057;
        font-size: 14px;
        font-weight: 500;
        padding: 8px 12px;
        margin: 0;
        border-radius: 4px;
        min-width: 80px;
        margin-right: 15px;
        text-align: center;
      }

      .label-text {
        display: inline-block;
      }

      .info-value {
        color: #333;
        font-size: 14px;
        flex: 1;
        word-break: break-all;
      }

      .info-value.highlight {
        color: #007bff;
        font-weight: 600;
      }

      .org-details {
        position: absolute;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        min-width: 250px;
        color: #333;
        display: none;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 10px;
      }

      .org-details h4 {
        margin: 0 0 10px 0;
        color: #2c3e50;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
      }

      .org-details p {
        margin: 5px 0;
        font-size: 13px;
      }
    </style>
  </head>
  <body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
      <div class="row">
        <div class="col-sm-12">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>学院党组织地图</h5>
            </div>
            <div class="ibox-content">
              <div class="row">
                <div class="col-sm-12">
                  <div class="map-info-panel">
                    <p>
                      <i class="fa fa-info-circle"></i>
                      本组织架构图展示了学院内各部门的层级结构和党建分布情况。红色节点表示有党员的部门，点击可查看详细信息。
                    </p>
                  </div>

                  <div class="stats-container">
                    <div class="stat-card">
                      <div class="stat-number-main" id="branchCount">0</div>
                      <div class="stat-label">党支部总数</div>
                    </div>
                    <div class="stat-card">
                      <div class="stat-number-main" id="memberCount">0</div>
                      <div class="stat-label">党员总数</div>
                    </div>
                    <div class="stat-card">
                      <div class="stat-number-main" id="excellentBranchCount">
                        0
                      </div>
                      <div class="stat-label">优秀党支部</div>
                    </div>
                    <div class="stat-card">
                      <div class="stat-number-main" id="excellentMemberCount">
                        0
                      </div>
                      <div class="stat-label">优秀党员</div>
                    </div>
                  </div>

                  <!-- <div class="map-controls">
                    <button class="btn-map-control" onclick="resetView()">
                      <i class="fa fa-refresh"></i> 重置视图
                    </button>
                    <button class="btn-map-control" onclick="showAllInfo()">
                      <i class="fa fa-eye"></i> 显示全部信息
                    </button>
                    <button class="btn-map-control" onclick="hideAllInfo()">
                      <i class="fa fa-eye-slash"></i> 隐藏全部信息
                    </button>
                  </div> -->

                  <div class="campus-map-container">
                    <div class="campus-map-title">
                      <i class="fa fa-sitemap"></i> 学院党建组织架构图
                    </div>
                    <div class="campus-map" id="campusMap">
                      <div class="loading">正在加载数据...</div>
                    </div>
                  </div>
                  <div class="map-legend">
                    <div class="legend-item">
                      <div
                        class="legend-color"
                        style="
                          background: linear-gradient(135deg, #e74c3c, #c0392b);
                        "
                      ></div>
                      <span><i class="fa fa-sitemap"></i> 组织部门</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 部门信息弹窗 -->
    <div id="deptModal" class="dept-modal">
      <div class="dept-modal-content">
        <div class="dept-modal-header">
          <h3>
            <i class="fa fa-university"></i>
            <span id="modalDeptName">部门信息</span>
          </h3>
          <span class="dept-modal-close">&times;</span>
        </div>
        <div class="dept-modal-body">
          <div class="dept-info-list">
            <div class="info-row" id="modalParentRow">
              <div class="info-label">
                <span class="label-text">上级部门:</span>
              </div>
              <div class="info-value" id="modalParentDept"></div>
            </div>

            <div class="info-row">
              <div class="info-label">
                <span class="label-text">部门名称:</span>
              </div>
              <div class="info-value" id="modalDeptNameValue">部门信息</div>
            </div>

            <div class="info-row">
              <div class="info-label">
                <span class="label-text">负责人:</span>
              </div>
              <div class="info-value" id="modalLeader">未设置</div>
            </div>

            <div class="info-row">
              <div class="info-label">
                <span class="label-text">联系电话:</span>
              </div>
              <div class="info-value" id="modalPhone">未设置</div>
            </div>

            <div class="info-row">
              <div class="info-label">
                <span class="label-text">邮箱:</span>
              </div>
              <div class="info-value" id="modalEmail">未设置</div>
            </div>

            <div class="info-row">
              <div class="info-label">
                <span class="label-text">部门状态:</span>
              </div>
              <div class="info-value" id="modalStatus">正常</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <th:block th:include="include :: footer" />

    <script type="text/javascript">
      // 页面加载完成后初始化
      $(function () {
        // 获取党支部和党员数据
        loadBranchData();
      });

      // 加载党支部数据
      function loadBranchData() {
        $.ajax({
          url: ctx + "system/dept/list",
          type: "POST",
          dataType: "json",
          success: function (data) {
            // 获取所有部门数据，构建组织架构图
            const allDepts = data;

            // 将部门数据存储到全局变量供弹窗使用
            window.allDepts = allDepts;
            console.log("设置 window.allDepts:", allDepts);

            // 获取每个部门的党员信息
            loadMemberData(allDepts);
          },
          error: function () {
            $(".loading").text("数据加载失败");
          },
        });
      }

      // 加载党员数据
      function loadMemberData(depts) {
        $.ajax({
          url: ctx + "system/partymember/member/list",
          type: "POST",
          dataType: "json",
          success: function (response) {
            const members = response.rows || [];

            // 构建部门与党员的关联关系
            const deptMemberMap = {};
            const excellentMembers = members.filter(
              (member) => member.isExcellent === "1"
            );

            // 初始化每个部门的党员列表
            depts.forEach((dept) => {
              deptMemberMap[dept.deptId] = {
                dept: dept,
                members: [],
                excellentMembers: 0,
              };
            });

            // 将党员分配到对应的部门
            members.forEach((member) => {
              if (deptMemberMap[member.deptId]) {
                deptMemberMap[member.deptId].members.push(member);
                if (member.isExcellent === "1") {
                  deptMemberMap[member.deptId].excellentMembers++;
                }
              }
            });

            // 过滤出有党员的部门作为党支部
            const branches = depts.filter(
              (dept) =>
                deptMemberMap[dept.deptId] &&
                deptMemberMap[dept.deptId].members.length > 0
            );

            // 更新统计数据
            $("#branchCount").text(branches.length);
            $("#memberCount").text(members.length);
            $("#excellentMemberCount").text(excellentMembers.length);

            // 渲染组织架构图
            renderOrgChart(depts, deptMemberMap);
          },
          error: function () {
            $(".loading").text("数据加载失败");
          },
        });
      }

      // 渲染组织架构图
      function renderOrgChart(depts, deptMemberMap) {
        const mapContainer = $("#campusMap");
        $(".loading").remove();

        // 清空容器
        mapContainer.empty();

        // 构建部门树结构
        const deptTree = buildDeptTree(depts);

        // 计算优秀党支部数量（有党员的部门）
        let excellentBranchCount = 0;
        depts.forEach((dept) => {
          const memberData = deptMemberMap[dept.deptId];
          if (
            memberData &&
            memberData.members.length > 0 &&
            memberData.members.length > 5
          ) {
            excellentBranchCount++;
          }
        });
        $("#excellentBranchCount").text(excellentBranchCount);

        // 创建组织架构图容器
        const orgChart = $('<div class="org-chart"></div>');
        mapContainer.append(orgChart);

        // 渲染组织架构树
        renderDeptNode(orgChart, deptTree, deptMemberMap, 0);

        // 绑定事件
        bindOrgEvents();
      }

      // 构建部门树结构
      function buildDeptTree(depts) {
        const deptMap = {};
        const roots = [];

        // 创建部门映射
        depts.forEach((dept) => {
          deptMap[dept.deptId] = { ...dept, children: [] };
        });

        // 构建树结构
        depts.forEach((dept) => {
          if (dept.parentId === 0 || !deptMap[dept.parentId]) {
            roots.push(deptMap[dept.deptId]);
          } else {
            deptMap[dept.parentId].children.push(deptMap[dept.deptId]);
          }
        });

        return roots;
      }

      // 渲染部门节点
      function renderDeptNode(container, nodes, deptMemberMap, level) {
        if (!nodes || nodes.length === 0) return;

        const levelContainer = $('<div class="org-level"></div>');
        container.append(levelContainer);

        nodes.forEach((node) => {
          const memberData = deptMemberMap[node.deptId] || {
            members: [],
            excellentMembers: 0,
          };
          const memberCount = memberData.members.length;
          const excellentCount = memberData.excellentMembers;
          const hasMembers = memberCount > 0;

          // 创建节点容器
          const nodeContainer = $('<div class="org-node-container"></div>');

          // 创建节点
          const nodeElement = $(`
            <div class="org-node ${level === 0 ? "root" : ""} ${
            hasMembers ? "has-members" : ""
          }" 
                 data-dept-id="${node.deptId}"
                 data-dept-name="${node.deptName}"
                 data-leader="${node.leader || "未设置"}"
                 data-member-count="${memberCount}"
                 data-excellent-count="${excellentCount}"
                 data-phone="${node.phone || "未设置"}"
                 data-email="${node.email || "未设置"}"
                 data-order-num="${node.orderNum || "未设置"}"
                 data-status="${node.status || "0"}">
              <div class="org-node-title">${node.deptName}</div>
            </div>
          `);

          nodeContainer.append(nodeElement);

          // 添加点击事件
          nodeElement.on("click", function () {
            showDeptModal($(this));
          });

          // 递归渲染子节点
          if (node.children && node.children.length > 0) {
            const childContainer = $('<div class="org-children"></div>');
            nodeContainer.append(childContainer);

            // 添加垂直连接线
            childContainer.append('<div class="org-vertical-line"></div>');

            // 如果有多个子节点，添加水平连接线
            if (node.children.length > 1) {
              const horizontalContainer = $(
                '<div class="org-horizontal-container"></div>'
              );
              childContainer.append(horizontalContainer);

              // 创建子节点容器
              const childLevelContainer = $(
                '<div class="org-child-level"></div>'
              );
              childContainer.append(childLevelContainer);

              // 渲染每个子节点并添加连接器
              node.children.forEach((child, index) => {
                const childWrapper = $('<div class="child-wrapper"></div>');
                childWrapper.append('<div class="org-child-connector"></div>');
                childLevelContainer.append(childWrapper);

                renderDeptNode(childWrapper, [child], deptMemberMap, level + 1);
              });

              // 计算并设置水平线的位置和宽度
              setTimeout(() => {
                const childNodes = childLevelContainer.find(".child-wrapper");
                if (childNodes.length > 1) {
                  const firstNode = childNodes.first();
                  const lastNode = childNodes.last();
                  const firstOffset =
                    firstNode.position().left + firstNode.width() / 2;
                  const lastOffset =
                    lastNode.position().left + lastNode.width() / 2;
                  const lineWidth = lastOffset - firstOffset;

                  const horizontalLine = $(
                    '<div class="org-horizontal-line"></div>'
                  );
                  horizontalLine.css({
                    left: firstOffset + "px",
                    width: lineWidth + "px",
                  });
                  horizontalContainer.append(horizontalLine);
                }
              }, 10);
            } else {
              // 只有一个子节点，使用直连线
              renderDeptNode(
                childContainer,
                node.children,
                deptMemberMap,
                level + 1
              );
            }
          }

          levelContainer.append(nodeContainer);
        });
      }

      // 绑定组织架构图事件
      function bindOrgEvents() {
        // 为每个组织节点添加点击事件
        $(".org-node").on("click", function (e) {
          // 隐藏所有信息框
          $(".org-details").hide();

          // 显示当前点击节点的信息框
          const infoBox = $(this).find(".org-details");
          infoBox.fadeIn(300);

          e.stopPropagation();
        });

        // 点击地图其他区域隐藏所有信息框
        $("#campusMap").on("click", function (e) {
          if (!$(e.target).closest(".org-details").length) {
            $(".org-details").fadeOut(200);
          }
        });

        // 鼠标进入组织节点高亮效果
        $(".org-node").on("mouseenter", function () {
          $(this).addClass("hover");
        });

        // 鼠标离开组织节点取消高亮
        $(".org-node").on("mouseleave", function () {
          $(this).removeClass("hover");
        });
      }

      // 重置视图
      function resetView() {
        $(".org-details").fadeOut(200);
        $(".org-node").removeClass("hover");
      }

      // 显示所有信息
      function showAllInfo() {
        $(".org-details").fadeIn(300);
      }

      // 隐藏所有信息
      function hideAllInfo() {
        $(".org-details").fadeOut(200);
      }

      // 显示部门信息弹窗
      function showDeptModal(nodeElement) {
        const deptId = nodeElement.data("dept-id");
        const deptName = nodeElement.data("dept-name");
        const leader = nodeElement.data("leader");
        const memberCount = nodeElement.data("member-count");
        const excellentCount = nodeElement.data("excellent-count");
        const phone = nodeElement.data("phone");
        const email = nodeElement.data("email");

        console.log("showDeptModal - deptId:", deptId, "deptName:", deptName);
        console.log("window.allDepts:", window.allDepts);

        // 查找当前部门的上级部门
        const parentDept = findParentDept(deptId, window.allDepts);
        console.log("找到的上级部门:", parentDept);

        // 更新弹窗标题中的部门名称
        $("#modalDeptName").text(deptName);

        // 更新弹窗内容 - 根节点不显示上级部门
        if (parentDept) {
          $("#modalParentDept").text(parentDept.deptName);
          $("#modalParentRow").show();
          console.log("显示上级部门:", parentDept.deptName);
        } else {
          // 隐藏上级部门整行
          $("#modalParentRow").hide();
          console.log("隐藏上级部门行");
        }

        // 更新其他信息
        $("#modalDeptNameValue").text(deptName);
        $("#modalLeader").text(leader);
        $("#modalPhone").text(phone);
        $("#modalEmail").text(email);
        $("#modalStatus").text(
          nodeElement.data("status") === "0" ? "正常" : "停用"
        );

        // 显示弹窗
        $("#deptModal").addClass("show");
      }

      // 查找上级部门（适用于平面结构）
      function findParentDept(deptId, depts) {
        console.log("findParentDept - 查找部门ID:", deptId);

        // 先找到当前部门
        const currentDept = depts.find((dept) => dept.deptId == deptId);
        console.log("找到当前部门:", currentDept);

        if (!currentDept || currentDept.parentId === 0) {
          console.log("是根部门或未找到，返回null");
          return null;
        }

        // 找到上级部门
        const parentDept = depts.find(
          (dept) => dept.deptId == currentDept.parentId
        );
        console.log("找到上级部门:", parentDept);

        return parentDept;
      }

      // 关闭弹窗
      function closeDeptModal() {
        $("#deptModal").removeClass("show");
      }

      // 绑定弹窗关闭事件
      $(document).ready(function () {
        // 点击关闭按钮
        $(".dept-modal-close").on("click", closeDeptModal);

        // 点击弹窗背景关闭
        $("#deptModal").on("click", function (e) {
          if (e.target === this) {
            closeDeptModal();
          }
        });

        // ESC键关闭弹窗
        $(document).on("keydown", function (e) {
          if (e.keyCode === 27) {
            // ESC键
            closeDeptModal();
          }
        });
      });
    </script>
  </body>
</html>
